<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<!-- Pager CSS -->
	<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
	<style type="text/css">
	
	</style>
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>基础信息</li>
			    <li>地址列表</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
						<select class="form-control" v-model="search.parent_id">
							<option value=""> -选择省份- </option>
							<option :value="item.id" v-for="item in provinces"> {{ item.name }} </option>
						</select>
					    <input type="text" class="form-control" v-model="search.name" placeholder="城市关键字" size="8">
					    <button type="button" class="btn btn-primary" @click="getList()">查询</button>
					    <button type="button" class="btn btn-success" @click="add()">新增</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>省份</th>
								<th>城市</th>
								<th>添加时间</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="row in rows">
								<td>{{row.province}}</td>
								<td>{{row.city}}</td>
								<td>{{row.add_time}}</td>
							</tr>
						</tbody>
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<vue-modal :visible.sync="modalShow" title="新增地区">
			<div class="container">
				<form class="form-horizontal">
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">上级地区</label>
						<div class="col-sm-4">
							<select class="form-control" v-model="addr.parent_id">
								<option value=""> - 无 - </option>
								<option :value="item.id" v-for="item in provinces"> {{ item.name }} </option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">地区名称</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" v-model="addr.name" placeholder="地区名称">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="button" class="btn btn-primary" @click="handleAdd">保存</button>
						</div>
					</div>
				</form>
			</div>
		</vue-modal>
	</div>
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					parent_id: '',
					name: ''
				},
				provinces: [],
				rows: [],
				total_page: 0,
				cur_page: 1,
				modalShow: false,
				addr: {
					parent_id: '',
					name: ''
				}
			},
			components: {
				'vue-page': vuePage,
				'vue-modal': vueModal,
			},
			created: function(){
				this.getProvinceList();
				this.getList();
			},
			methods:{
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					$.post("{%:url('Area/getlist')%}?page=" + page,data,function(rsp){
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				getProvinceList(){
					var _this = this;
					$.post("{%:url('Area/getTopList')%}?",{

					},function(rsp){
						_this.provinces = rsp.data.rows;
					},'json')
				},
				add: function() {
					this.modalShow = true;
				},
				handleAdd(){
					var data = this.addr;
					var _this = this;
					$.post("{%:url('Area/handle')%}",data,function(rsp){
						alert(rsp.msg);
						if (rsp.code) {
							_this.modalShow = false;
							_this.getList();
						}
					},'json')
				}
			}
		});	
	</script>
</body>

</html>